<template>
  <div>
    <!-- 登录 -->
    <div class="login">
      <h1 style="margin-top: 10px">后台管理系统</h1>
      <div>
        <div style="height: 30px"></div>
        <el-input
          placeholder="请输入用户名"
          v-model="user.userName"
          clearable
          class="in"
        >
        </el-input>
        <br /><br />
        <el-input
          placeholder="请输入密码"
          v-model="user.password"
          show-password
          class="in"
        ></el-input>
      </div>

      <div style="position: fixed; margin-left: 130px" @click="changeCode">
        <img :src="icon" style="height: 60px; width: 120px; margin: 0px 10px" />
      </div>
      <br />
      <el-input
        placeholder="验证码"
        v-model="user.captchaCode"
        clearable
        style="width: 100px; margin-left: 200px"
      >
      </el-input
      ><br /><br />

      <el-button type="primary" icon="el-icon-upload" @click="login"
        >登录</el-button
      >
      <br /><br />
      <div>
        <el-link
          type="primary"
          :underline="false"
          @click="centerDialogVisible = true"
          >忘记密码</el-link
        >
        <el-link
          type="primary"
          :underline="false"
          @click="toregister"
          style="margin-left: 100px"
          >前往注册</el-link
        >
      </div>
    </div>

    <!-- 忘记密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <div>
        <el-input
          placeholder="请输入用户名"
          v-model="changepassword.userName"
          clearable
        >
        </el-input>
        <br /><br />
        <el-input
          placeholder="请输入手机号"
          v-model="changepassword.phone"
          clearable
          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
          maxlength="11"
        >
        </el-input>
        <br /><br />
        <el-input
          show-password
          placeholder="请输入新密码"
          v-model="changepassword.password"
          clearable
        >
        </el-input>
        <br /><br />
        <el-input
          show-password
          placeholder="再次输入新密码"
          v-model="changepassword.passwordagain"
          clearable
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    // 登录
    login() {
      this.$message({
        duration: 600,
        dangerouslyUseHTMLString: true,
        message: '<i class="el-icon-loading"></i>登录中',
      });

      this.$axios.post("/safesys/api/user/login", this.user).then((res) => {
        if (res.data.code == 1) {
          setTimeout(() => {
            this.$router.push("Home");
          }, 500);
        } else {
          this.$message({
            duration: 1500,
            message: res.data.msg,
          });
        }
      });
    },
    // 取消修改密码
    cancel() {
      this.changepassword = {};
      this.centerDialogVisible = false;
    },
    //确认修改密码
    update() {
      if (this.changepassword.password == this.changepassword.passwordagain) {
        this.$axios
          .post("/safesys/api/user/reset", this.changepassword)
          .then((res) => {
            if (res.data.code == 1) {
              this.changepassword = {};
              this.centerDialogVisible = false;
              this.$message({
                duration: 600,
                dangerouslyUseHTMLString: true,
                message: "修改成功",
              });
            } else {
              this.$message({
                duration: 1500,
                message: res.data.msg,
              });
            }
          });
      } else {
        this.$message({
          duration: 600,
          dangerouslyUseHTMLString: true,
          message: "两次密码输入不匹配!",
        });
      }
    },
    // 前往注册
    toregister() {
      this.$message({
        duration: 600,
        dangerouslyUseHTMLString: true,
        message: '<i class="el-icon-loading"></i>转跳中',
      });
      setTimeout(() => {
        this.$router.push("/register");
      }, 500);
    },
    changeCode() {
      this.$axios.post("/safesys/api/captcha/get", {}).then((res) => {
        this.icon = res.data.data;
      });
    },
  },

  data() {
    return {
      // 忘记密码弹框
      centerDialogVisible: false,
      // 登录用户名，密码
      user: {
        captchaCode: "",
        password: "",
        userName: "",
      },
      // 修改密码，手机号和密码
      changepassword: {},
      icon: "",
    };
  },
  created() {
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      this.$router.push("/carry");
    }
    if (
      this.$route.params.userName != undefined &&
      this.$route.params.password != undefined
    ) {
      this.user.userName = this.$route.params.userName;
      this.user.password = this.$route.params.password;
    }
    this.changeCode();
  },
};
</script>
